<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix"><span>热区</span></div>
    <div>
      <el-collapse v-model="activeNames">
        <el-collapse-item title="组件状态" name="1">
          <el-form label-width="100px" size="medium">
            <el-form-item label="选择图片">
              <div class="upload_div" :style="'height:' + height / 1.52 + 'px'"><Upload :tempUrl="data.img" @input="getimg"></Upload></div>
            </el-form-item>
            <el-form-item label=""><el-button @click="show = true">添加热区</el-button></el-form-item>
          </el-form>
        </el-collapse-item>
        <el-collapse-item title="组件样式" name="1">
          <el-form label-width="100px" size="medium">
            <el-form-item label="上间距">
              <div class="slider_box">
                <el-slider class="slider_item" :max="50" v-model="data.padding.top"></el-slider>
                <el-input-number v-model="data.padding.top" :controls="false" :min="0" :max="50"></el-input-number>
              </div>
            </el-form-item>

            <el-form-item label="下间距">
              <div class="slider_box">
                <el-slider class="slider_item" :max="50" v-model="data.padding.bottom"></el-slider>
                <el-input-number v-model="data.padding.bottom" :controls="false" :min="0" :max="50"></el-input-number>
              </div>
            </el-form-item>

            <el-form-item label="左右间距">
              <div class="slider_box">
                <el-slider class="slider_item" :max="50" v-model="data.padding.lr"></el-slider>
                <el-input-number v-model="data.padding.lr" :controls="false" :min="0" :max="50"></el-input-number>
              </div>
            </el-form-item>
            <el-form-item label="上边角">
              <div class="slider_box">
                <el-slider class="slider_item" :max="50" v-model="data.radius.top"></el-slider>
                <el-input-number v-model="data.radius.top" :controls="false" :min="0" :max="50"></el-input-number>
              </div>
            </el-form-item>
            <el-form-item label="下边角">
              <div class="slider_box">
                <el-slider class="slider_item" :max="50" v-model="data.radius.bottom"></el-slider>
                <el-input-number v-model="data.radius.bottom" :controls="false" :min="0" :max="50"></el-input-number>
              </div>
            </el-form-item>
          </el-form>
        </el-collapse-item>
      </el-collapse>
    </div>
    <el-dialog :visible.sync="show" append-to-body width="610px" :close-on-click-modal="false">
      <div class="content">
        <div class="img_box" :style="'background-image: url(' + data.img + ');height:' + height + 'px; width: 570px; position: relative;'">
          <vdr
            v-if="show"
            v-for="(item, i) in data.list"
            :key="i"
            v-on:dragging="onDrag(arguments, item)"
            v-on:resizing="onResize(arguments, item)"
            :w="item.width"
            :h="item.height"
            :parent="true"
            :debug="false"
            :x="item.x"
            :y="item.y"
            :snap="true"
            :snapTolerance="20"
          >
            <div class="box">
              <span class="addbtns" @click="selectlink(item, i)">添加链接</span>
              <span class="delbtns" @click="delitem(i)">删除热区</span>
              <div>
                <span>{{ item.name }}</span>
              </div>
            </div>
          </vdr>
        </div>
      </div>
      <div slot="footer">
        <el-button @click="addlist">添加热区</el-button>
        <el-button @click="suredata">确定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import vdr from 'vue-draggable-resizable-gorkys';
import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css';
import Upload from '@/components/Upload/SingleImage2';
import {getImageInfo} from '@/utils/index';
import {mapState} from 'vuex';
import {mapGetters} from 'vuex';
export default {
  components: {vdr, Upload},
  data() {
    return {
      height: 570,
      show: false,
      activeNames: ['1'],
      acivedata: {},
      list: [
        {
          width: 150,
          height: 150,
          x: 0,
          y: 0
        }
      ],
      img: ''
    };
  },
  computed: {
    ...mapGetters(['picurl'])
  },
  props: {
    data: {
      type: Object,
      default: {}
    }
  },

  watch: {
    'data.img': {
      handler(newimg, oldimg) {
        const _this = this;
        getImageInfo(newimg, function(width, height) {
          _this.height = Math.ceil((570 / width) * height);
        });
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    delitem(i) {
      this.data.list.splice(i, 1);
    },
    addlist() {
      this.data.list.push({
        width: 150,
        height: 150,
        x: 0,
        y: 0,
        link: '',
        name: '',
        id: '',
        type: 1
      });
    },
    selectlink(item, i) {
      this.acivedata = item;
      this.activid = i;
      this.$parent.showlinkselcet(item);
    },
    getAData(item) {
      this.acivedata.link = item.link;
      this.acivedata.name = item.name;
      this.acivedata.id = item.id;
      this.acivedata.type = item.type;
      this.acivedata.login_type = item.login_type;
    },
    suredata() {
      // this.data.list = this.list;
      this.show = false;
    },
    getimg(img) {
      let _this = this;

      if (img.indexOf('http') > -1) {
        this.data.img = img;
      } else {
        if (this.picurl) {
          this.data.img = this.picurl + '/' + img;
        } else {
          this.data.img = img;
        }
      }

      // getImageInfo(img, function(width, height) {
      //   _this.height = Math.ceil((570 / width) * height);
      // });
    },
    onResize(data, item) {
      item.x = data[0];
      item.y = data[1];
      item.width = data[2];
      item.height = data[3];
    },
    onDrag(data, item) {
      item.x = data[0];
      item.y = data[1];
    }
  }
};
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  background: rgba(45, 140, 240, 0.6);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: #fff;
}
.addbtns {
  position: absolute;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 3px 4px;
  cursor: pointer;
  font-size: 16px;
  left: 0;
}
.delbtns {
  position: absolute;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 3px 4px;
  cursor: pointer;
  font-size: 16px;
  right: 0;
}
.upload_div {
  width: 375px;
  // min-height: 200px;
}
.img_box {
  background-size: cover;
}
.content {
  max-height: calc(100vh - 110px - 160px);
  overflow-y: auto;
  position: relative;
}
</style>
